$blue ?= #007bff
$indigo ?= #6610f2
$purple ?= #6f42c1
$pink ?= #e83e8c
$red ?= #dc3545
$orange ?= #fd7e14
$yellow ?= #ffc107
$green ?= #28a745
$teal ?= #20c997
$cyan ?= #17a2b8
$gray-100 ?= #f8f9fa
$gray-200 ?= #e9ecef
$gray-300 ?= #dee2e6
$gray-400 ?= #ced4da
$gray-500 ?= #adb5bd
$gray-600 ?= #6c757d
$gray-700 ?= #495057
$gray-800 ?= #343a40
$gray-900 ?= #212529

$color-info ?= $cyan
$color-primary ?= $blue
$color-success ?= $green
$color-warning ?= $yellow
$color-danger ?= $red
$color-light ?= $gray-100
$color-dark ?= $gray-800
$color-secondary ?= $gray-600

$yiq-text-dark ?= $gray-900
$yiq-text-light ?= #fff
$yiq-contrasted-threshold ?= 150

$theme-colors = {
  "primary":    $color-primary,
  "secondary":  $color-secondary,
  "success":    $color-success,
  "info":       $color-info,
  "warning":    $color-warning,
  "danger":     $color-danger,
  "light":      $color-light,
  "dark":       $color-dark
}

$path-font ?= '../assets/fonts/'
$font-name ?= 'vafonts'

$padding-dg-header-cell ?= 4px

$color-df-title-border-bottom ?= #aaa
$color-df-description ?= $color-dark

$color-df-input-border ?= #ccc
$color-df-input-border-focus ?= $color-primary
$color-df-input-disable-background ?= #eee
$color-df-input-group-addon-font ?= #555
$color-df-input-group-addon-background ?= #eee
$color-df-input-placeholder ?= #999

$color-df-checkbox-border ?= #dddee1
$color-df-radio-border ?= #dddee1

$font-size-df-input ?= 12px

$height-df-input-default ?= 32px
$height-df-input-large ?= 36px
$height-df-input-small ?= 24px
$padding-df-input-default ?= 6px 7px
$padding-df-input-large ?= 4px 7px
$padding-df-input-small ?= 1px 7px

$time-df-transition ?= .2s

$color-df-rate-star ?= $color-primary

$zindex-df-dropdown ?= 999

/*combo*/
$color-df-combo-loading-mask-bg ?= #777
$color-df-combo-head-text ?= #333
$color-df-combo-body-text ?= #666
$color-df-combo-body-hover-text ?= #333
$color-df-combo-body-selected-text ?= $color-primary
$color-df-combo-sep-border ?= #d2d2d2
$color-df-combo-active ?= $color-primary

$width-df-number-opt-btn ?= 30px

$color-toaster-text ?= #fff
$color-toaster-success-background ?= $color-success
$color-toaster-error-background ?= $color-danger
$color-toaster-info-background ?= $color-info
$color-toaster-warning-background ?= $color-warning
$zindex-toaster ?= 99999

$color-modal-title-text ?= #333
$color-modal-title-border ?= #d2d2d2
$color-modal-close-button ?= $gray-600

/*button*/
$border-radius-btn ?= 0
$border-radius-btn-lg ?= 0
$border-radius-btn-sm ?= 0
$border-radius-btn-xs ?= 0
$font-size-btn-default ?= 14px
$font-size-btn-lg ?= 16px
$font-size-btn-sm ?= 12px
$font-size-btn-xs ?= 12px
$line-height-btn-base ?= 1.5
$line-height-btn-lg ?= 1.5
$line-height-btn-sm ?= 1.5
$line-height-btn-xs ?= 1.5

$padding-y-btn ?= .375rem
$padding-x-btn ?= .75rem
$line-height-btn ?= $line-height-btn-base

$width-btn-focus ?= 1px
$color-btn-focus ?= rgba($color-primary, .25)
$input-btn-focus-box-shadow ?= 0 0 0 $width-btn-focus $color-btn-focus

$padding-y-btn-xs ?= 0
$padding-x-btn-xs ?= .5rem
$line-height-btn-xs ?= $line-height-xs

$padding-y-btn-sm ?= .25rem
$padding-x-btn-sm ?= .5rem
$line-height-btn-sm ?= $line-height-sm

$padding-y-btn-lg ?= .5rem
$padding-x-btn-lg ?= 1rem
$line-height-btn-lg ?= $line-height-lg

$opacity-btn-disabled ?= .4
$transition-btn ?= color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out

$color-btn-link ?= $color-primary
$decoration-btn-link ?= none
$color-btn-link-hover ?= darken($color-btn-link, 15%)
$decoration-btn-link-hover ?= underline


/*DataGrid*/
$color-dg-border ?= #ddd
$color-row-odd-background ?= #eee
$color-row-even-background ?= #fff
$color-row-hover-background ?= $gray-200
$color-row-selected-background ?= $gray-400
$border-dg-header-bottom ?= solid 2px lighten($color-primary, 60%)
$font-size-dg-pagination ?= 12px
$line-height-dg-pagination ?= 24px
$color-dg-sort-highlight ?= $color-primary
$color-dg-sort ?= $gray-400

/*Menu*/
$color-menu-active ?= lighten($color-warning, 30%)
$font-size-menu-group ?= 12px
$font-size-menu ?= 14px
$color-menu-background ?= $gray-800
$height-menu-item ?= 48px


/*DatePicker*/
$datePicker-color ?= #333
$datePicker-off-color ?= lighten($datePicker-color, 50%)
$datePicker-header-color ?= #333
$datePicker-icon-color ?= lighten($datePicker-color, 20%)
$datePicker-border-color ?= #d2d2d2
$datePicker-inner-border-color ?= #e4e4e4
$datePicker-cell-hover-color ?= lighten($datePicker-color, 60%)
$datePicker-range-color ?= lighten($color-primary, 30%)
$datePicker-range-hover-color ?= $color-primary
$datePicker-active-color ?= $color-primary
$datePicker-text-hover-color ?= $color-primary
